<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <style>[v-cloak]{display: none;}
        #distpicker select{width:60px;background: none;}
        #distpicker select+select{margin-left:15px;}
        .red{color:#E82D2D;}
    .user_order .address .area_box{padding:0;}
    .number_detail .number_head .inline{color:#666;}
    </style>

</head>
<body>
<div id="app"  v-cloak>
    <div class="err_box layui-container" id="errBox" v-show="tipsIf" :style="{top:errorTop+'px'}">{{tipsMsg}}</div>
    <xhhead on="0" v-on:login="loginMsgPop"></xhhead>
    <Login v-show="login_if" :login_type="login_num" v-on:close="login_close" v-on:tip="son_tip" ></Login>

    <div class="number_detail">
        <div class="layui-container no_pad box_shadow number_tips">
            <div class="title">在线预定靓号入网注意事项</div>
            <div class="mt20">
                <img src="images/xhlc.png" class="lc_img" alt="">
            </div>
            <div class="line" style="margin:20px;"></div>
            <div class="tips_txt">
                <p>1、预约不需要在线支付！</p>
                <p>2、预约成功后，客服首先核实号码，然后确定是否交易。</p>
                <p>3、用户可以随时取消订单,不承担任何费用！</p>
                <p>4、网站号码13608039732为成都移动号码, 成都移动号码可以在全球通,神州行,畅听卡,动感地带套餐中互转; </p>
                <p>5、根据国家工信部相关规定，所有手机号码销售都需要提供身份证实名验证,到店自取。需要您上传身份证照片及在收货时查看身份证原件及收取复印件。</p>
            </div>
        </div>
        <div class="layui-container no_pad mt30 box_shadow detail_content" style="padding-bottom:20px;">
            <div class="title">预约号码</div>
            <div class="number_head">
                <label >号码详情</label>
                <div class="number_span"><span>139</span><span>1010</span><span>2858</span></div>
                <div class="inline"><span class="label">价格：</span><span class="red">￥100</span>(含话费40元)</div>
                <div class="inline"><span class="label">归属地：</span>成都</div>
                <div class="inline"><span class="label">运营商：</span>移动</div>
            </div>
            <div class="line"></div>
            <div class="detail_item mt20">
                <label>选择套餐</label>
                <div class="inline pack_box">
                    <ul class="pack_list">
                        <li :class="{on:packOn==i}" @click="packBtn(i)" v-for="(a,i) in packList">{{a.item}}</li>
                    </ul>
                    <div class="pack_info">
                        398元/月。套餐包含：来电显示，每月前40GB提供4G网速，超过后至100GB上网速度降至3G网络速率（最高7.2Mbps），100GB以上上网速度降至最高256Kbps，次月恢复；
                        每月语音拨打非联通号码超过3000分钟，或拨打超过1000个不同号码的用户，视为非正常拨打行为，当月关闭服务。冰激凌套餐及其主副卡产品如用于纯商业服务、商业用途的流量共享热点、广告推销等经营盈利，我公司将实施上网速率限速至不高于
                    </div>
                </div>
            </div>
            <div class="detail_item">
                <label>付款方式</label>
                <div class="inline">
                    <div class="select_box">
                        <select>
                            <option value="">请选择支付方式</option>
                            <option value="1">在线支付</option>
                            <option value="2">线下支付</option>
                        </select>
                    </div>
                </div>
            </div>
            <!--添加新的收货信息-->
            <div class="add_info " v-show="add_area_if">
                <div class="detail_item">
                    <label>姓&emsp;&emsp;名</label>
                    <div class="inline">
                        <input type="text" placeholder="填写收货人姓名" class="item_input" v-model="user">
                    </div>
                </div>
                <div class="detail_item">
                    <label>联系电话</label>
                    <div class="inline">
                        <input type="text" placeholder="填写手机号" class="item_input m_right_30" v-model="mobile"  >
                        <div class="code_box">
                            <input type="text" placeholder="填写验证码" class="item_input" v-model="code">
                            <span class="code_btn" @click="getCode">{{codeMsg}}</span>
                        </div>
                    </div>
                </div>
                <div class="detail_item">
                    <label class="top">收货地址</label>
                    <div class="inline">
                        <div>
                            <div class="select_box area_box" data-toggle="distpicker" id="distpicker">
                                <select class="form-control" id="province"></select>
                                <select class="form-control" id="city"></select>
                                <select class="form-control" id="country"></select>
                            </div>
                            <input type="text" placeholder="填写详细地址" class="item_input">
                            <button v-if="area_list.length>0" @click="add_area_if=false" class="btn_back">返回</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--已有的信息列表-->
            <div class="user_order detail_item" v-show="!add_area_if">
                <label class="top">收货地址</label>
                <div class="address inline">
                    <div class="area_box">
                        <div class="area_item" v-for="(a,i) in area_list" @click="areaChoose(i)">
                            <div :class="{area_info:true,on:a.on==1}">
                                <p class="item1">
                                    <span>{{a.user}}</span> <span>{{a.number}}</span>
                                </p>
                                <p class="item2">
                                    {{a.region}}
                                </p>
                                <img src="images/right_box_icon.png" alt="" class="right_icon" v-show="a.on==1">
                            </div>
                        </div>
                        <div class="area_box" @click="addNewInfoBtn">
                            <div class="area_info add_area">
                                <img src="images/add.png" alt="">
                                <p>添加新的地址</p>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

            <div class="detail_item">
                <label>&emsp;&emsp;&emsp;&emsp;</label>
                <div class="inline">
                    <span :class="{radio:true,on:isCheck}" @click="isCheck=!isCheck"><img src="images/right.png" alt="" v-show="true"></span>
                    勾选则表示你已经充分了解并完全同意 <span class="text_blue" @click="dealIf=true">《入网协议》</span>
                </div>
            </div>
            <div class="detail_item mt50">
                <label ></label>
                <div class="inline">
                    <span class="btn basic_btn order_btn" @click="orderBtn">立即预约</span>
                </div>
            </div>
        </div>
        <div class="layer" v-show="dealIf">
            <div class="layer_container">
                <div class="close">
                    <img src="images/close_icon.png" class="icon_close" alt="" @click="dealIf=false">
                </div>
                <div class="deal">
                    这里是入网协议的内容
                </div>
            </div>
        </div>
        <div class="layer" v-show="errIf">
            <div class="layer_container err_pop">
                <div class="title">提示</div>
                <div class="content">
                    {{errMsg}}
                </div>
            </div>
        </div>
    </div>
    <!--预约弹窗-->
    <!--预约成功-->
    <div class="layer order_appoint_pop hide">
        <div class="layer_container">
            <div class="close">
                <img src="images/close_icon.png" class="icon_close" alt="">
            </div>
            <div class="title">预约成功</div>
            <div class="content">
                <p>您预约的号码已经提交成功，工作人员将在2个工作日内通过电话联系您，与您核实订单内容。</p>
                <p> 您也可以通过拨打以下号码主动与我们取得联系：<span class="red">18147295783</span></p>
            </div>
            <div class="btn_box">
                <div class="basic_btn inline">知道了</div>
            </div>
        </div>
    </div>
    <!--预约失败-->
    <div class="layer order_appoint_pop hide">
        <div class="layer_container">
            <div class="close">
                <img src="images/close_icon.png" class="icon_close" alt="">
            </div>
            <div class="title">预约失败</div>
            <div class="content">
                手慢一步！您选择的号码已经被别人预约啦，您可以去看看更多的靓号哟~
            </div>
            <div class="btn_box">
                <div class="basic_btn inline">看更多</div>
            </div>
        </div>
    </div>
    <xhfooter></xhfooter>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="foot.js"></script>
<script src="js/components.js"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
<script>

    var app = new Vue({
        el:"#app",
        data:{
            tipsMsg:"提示信息",
            tipsIf:false,
            errorTop:0,
            login_if:false,
            login_num:1,
            packList:[{item:"套餐1"},{item:"套餐2"},{item:"套餐3"},{item:"套餐4"}],
            packOn:0,
            isCheck:true,
            dealIf:false,
            errMsg:"错误信息",
            errIf:false,
            mobile:"",
            user:"",
            province:"",
            city:"",
            country:"",
            address:"",
            code:"",
            codeIf:true,
            codeTime:60,
            codeInter:"",
            codeMsg:"获取验证码",
            area_list:[
                {user:"罗西",number:"18483223321",region:"四川省成都市成华区驷马桥49号金卡小区",on:1},
                {user:"罗西",number:"18483223321",region:"四川省成都市成华区驷马桥49号金卡小区",on:0},
                {user:"罗西",number:"18483223321",region:"四川省成都市成华区驷马桥49号金卡小区",on:0},
            ],
            add_area_if:false,
        },
        methods:{
            //收货信息选择
            areaChoose:function(i){
                this.area_list.forEach(function(item){item.on=0});
                this.area_list[i].on=1;
            },
            //添加新的收货信息
            addNewInfoBtn:function(){
                this.add_area_if=true;
            },
            orderBtn:function () {
                var regMobile=/^(1[3,4,5,6,7,8,9][0-9]{9})$/
                if(!this.mobile){
                    this.err_tip("请填写手机号码！");
                    return true;
                }else if(!regMobile.test(this.mobile)){
                    this.err_tip("请填写正确的手机号码！");
                    return true;
                }
                this.err_tip("预约成功");
                setTimeout(function () {
                    location.href="user_order.html"
                },1000)
            },
            getCode:function () {
              if(this.codeIf){
                  this.codeIf=false;
                  var that =this
                  this.codeInter=setInterval(function () {
                      that.codeTime = that.codeTime - 1;
                      if(that.codeTime>=0){
                          that.codeMsg=that.codeTime+"s重新获取";
                      }else{
                          that.codeMsg="重新获取";
                          that.codeTime=60;
                          that.codeIf=true;
                          clearInterval(that.codeInter);
                      }
                  },1000)
              }
            },
            packBtn:function (i) {
                this.packOn=i
            },
            err_tip:function (msg) {
                var that=this;
                this.errIf = true;
                this.errMsg=msg;
                setTimeout(function () {
                    that.errIf=false;
                },1500)
            },
            //登陆弹窗
            loginMsgPop:function(data){ this.login_if=true,this.login_num=data;},
            login_close:function(data){this.login_if=data},
            //提示子组件错误信息
            son_tip:function (data) {this.tips_show(data.msg)},
            //提示错误信息
            tips_show:function (msg) {
                this.tipsMsg=msg;this.tipsIf=true;
                var that = this;that.errorTop=-40;
                var msgInter=setInterval(function () {
                    that.errorTop=that.errorTop<0?(that.errorTop+2):0;
                    if(that.errorTop>0){clearInterval(msgInter)}
                },10)
                setTimeout(function () {that.tipsIf=false;},2000)
            },
        },
        created:function () {
            
        },
        mounted:function () {
            
        }
    })
</script>
</body>
</html>